<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bannerList" :key="index">
        <img class="pc100" :src="item" alt />
      </van-swipe-item>
    </van-swipe>

    <div id="sort" class="sort flex aic jc-sa mt-10">
      <div
        class="sort-item flex fdc jc-c aic"
        v-for="(item, index) in seasonalList"
        :key="index"
      >
        <img :src="item.iconUrl" alt="" />
        <span class="sort-title mt-10">{{ item.name }}</span>
      </div>
    </div>
    <div class="discount flex jc-sa">
      <div class="discount-item bj1 flex aic jc-sa rel">
        <span class="cjsj abs"></span>
        <span class="abs discount-title f10">秒杀</span>
        <div class="discount-left">
          <p class="f14">秒杀</p>
          <p class="f12 mt-5 col">超值惊喜</p>
          <p class="f12 mt-5 kanjia">立即砍价</p>
        </div>
        <div class="discount-right">
          <img
            src="http://fresh.huruqing.cn/img/miaosha-icon.e7d1fb11.png"
            alt=""
          />
        </div>
      </div>
      <div class="discount-item bj2 flex aic jc-sa rel">
        <span class="cjsj abs"></span>
        <span class="abs discount-title f10">拼团</span>
        <div class="discount-left">
          <p class="f14">拼团</p>
          <p class="f12 mt-5 col">限时拼团</p>
          <p class="f12 mt-5 kanjia">一键拼团</p>
        </div>
        <div class="discount-right">
          <img
            src="http://fresh.huruqing.cn/img/pintuan-icon.711363b5.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="coupon flex aic jc-sb mt-5 mb-5">
      <div class="flex">
        <i class="iconfont ml-5 icon-youhuijuan"></i>
        <p class="ml-5">超值福利</p>
        <p class="ml-5">|</p>
        <p class="ml-5">全场满减</p>
      </div>
      <div>
        <p>立即领取<i class="iconfont icon-arrow-up-copy-copy-copy"></i></p>
      </div>
    </div>

    <div class="content mb-30 pb-30">
      <!-- 排序 -->
      <van-sticky>
        <div class="content-title mb-15 flex f14 jc-sa aic">
          <div>推荐</div>
          <div class="flex aic">
            销量
            <div class="flex fdc jc-sa">
              <i class="iconfont icon-shangjiantou"></i>
              <i class="iconfont icon-arrow-up"></i>
            </div>
          </div>
          <div class="flex aic">
            价格
            <div class="flex fdc jc-sa">
              <i class="iconfont icon-shangjiantou"></i>
              <i class="iconfont icon-arrow-up"></i>
            </div>
          </div>
        </div>
      </van-sticky>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="loadMore"
        id="item"
        class="flex jc-sb container"
      >
        <router-link
          :to="`/product/detail/${item.productId}`"
          class="content-item ml-10 mr-10"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="item-img">
            <img :src="item.imgUrl" alt="" />
          </div>
          <p class="f14 mt-15">{{ item.masterName }}</p>
          <p class="f12 mt-5 toe intr">
            {{ item.slaveName }}
          </p>
          <div class="flex mt-5 jc-sb">
            <p>
              <span class="f10 red">￥</span>
              <span class="f15 red">{{ item.minPrice / 100 }}</span>
            </p>
            <p>
              <span class="f10 f999">销量</span>
              <span class="f14 f999 pr-5">：{{ item.inventory }}</span>
            </p>
          </div>
        </router-link>
      </van-list>

      <Footer />
    </div>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import $axios from "@/utils/request";

export default {
  components: {
    Footer
  },
  data() {
    return {
      // 轮播图列表
      bannerList: [],
      seasonalList: [],
      storeList: [],
      list: [],
      loading: false,
      finished: false,
      pageNum: 1,
    };
  },

  created() {
    this.getBannerList();
    this.loadMore();
  },

  methods: {
      async loadMore() {
      let data = { pageNum: this.pageNum };
      let res = await $axios.get("/product/list", data);
      this.list = [...this.list, ...res.list];
      this.pageNum++;
      this.loading = false;
      if (res.list.length === 0) {
        this.finished = true;
      }
    },
    // 请求轮播图列表数据
    async getBannerList() {
      try {
        // 添加loading
        // this.$toast.loading({});
        this.loadingStear()
        let res = await $axios.get("/product/getBanners");
        this.bannerList = res.banners;
        let res1 = await $axios.get("/category/all");
        this.seasonalList = res1.list;
        let res2 = await $axios.get("/product/all");
        this.storeList = res2.list;
        // 关闭loading
        this.closeLoading()
      } catch (error) {
        console.log(error);
        // 关闭loading
        this.$toast.closeLoading();
      }
    },
  },
};
</script>


<style lang="less">
@import "./list.less";
</style>